<template>

  <li  class="my-order-item " :key="index" :class="[type == 1 ? 'end' : '']">
    <a href="javascript:void(0)" class="block" v-touch:tap="(e)=>{forwardOrderItem();}">

      <section class="fx-row ">

          <div class="order-store-cover bg-img-clip" :style="{backgroundImage:`url(${order.coverPic})`}"></div>
          <div class="fx ovh">

            <h5 class="order-title text-ellipsis">{{order.storeName}}</h5>
            <p class="order-time">
              {{getStarTime}} - {{getEndTime}}
            </p>

            <div class="text-right order-util">
                <span v-if="order.state == 4" class="text-danger">有超时费</span>
                <span class="ml5 text-primary" :class="[getStatus]">{{getStatusName}}</span>
            </div>


          </div>
      </section>

    </a>
  </li>
</template>
<style lang="scss" scoped>
  @import "../../../common/skin/var";



  .my-order-item{

    margin-bottom: 10px;
    &.end{
      opacity: 0.6;

      .order-time{
        color: #9B9B9B !important;
      }

    }

    background: #fff;
    border: 1px solid $border-color;
    padding: 12px 12px;
    display: block;


    .order-store-cover{
      width: 110px;
      min-width: 110px;
      height: 74.5px;
      border-radius: 4px;
      margin-right: 15px;
    }

    .order-title{
      font-size: 16px;

    }

    .order-time{
      margin-top: 10px;
      color:  $primary-color;
      font-size: 12px;
      margin-bottom: 18px;
    }

    .order-util{
      font-size: 12px;
    }

  }

</style>

<script>
import Util from "util";
import CONST from  "const";


export default{
        props : {
          order : Object,
          type  : Number
        },

        mounted : function(){

        },
        data(){
          return {

          }
        },
        computed: {
            getStarTime: function () {
              return new Date(this.order.startTime).Format('MM月dd日 hh:ss');
            },

            getEndTime: function () {
              return new Date(this.order.endTime).Format('hh:ss');
            },

            getStatusName : function(){
                switch (this.order.state){
                case CONST.PAY_ORDER_STATUS.WAIT:
                  return '未付款'
                  break;
                case CONST.PAY_ORDER_STATUS.FINISH:
                  return '已结束'
                  break;
                case CONST.PAY_ORDER_STATUS.CANCEL:
                  return '已取消'
                  break;
                case CONST.PAY_ORDER_STATUS.REFUND:
                  return '已退款'
                  break;
                case CONST.PAY_ORDER_STATUS.SUCCESS:
                  return '已支付'
                  break;
                default :
                  break;
            }
           },

            getStatus : function(){
              switch (this.order.state){
                case CONST.PAY_ORDER_STATUS.TIME_OUT:
                  return 'text-danger'
                  break;
                case CONST.PAY_ORDER_STATUS.CANCEL:
                  return 'text-gray'
                  break;
                default :
                   return 'text-primary'
                  break;

              }
            },
              imgStyle : function(){
               return Util.Location.ratioElementForWindow(1.47);
            }
        },
        methods : {
            forwardOrderItem : function(){
                window.getRouter().push({"path" : `/order/detail/${this.order.appointId}`});
            }
       }
    }

</script>


